<template>
  <div class="orders-box">
    <el-card class="orders-card">
      <template #header>
        <div class="card-header">
          <span>挂号订单</span>
        </div>
      </template>
      <div class="orders-main">
        <el-form :inline="true">
          <el-form-item label="就诊人">
            <el-select v-model="visitor" @change="handlerOrderInfo">
              <el-option label="请选择全部的就诊人" value="" />
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in userInfo"
                :key="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="orderStatus" @change="handlerOrderInfo">
              <el-option label="全部订单" value="" />
              <el-option
                :label="item.comment"
                :value="item.status"
                v-for="item in allStatus"
                :key="item.status"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="orders-table"
        >
          <el-table-column prop="reserveDate" label="就诊时间" />
          <el-table-column prop="hosname" label="医院" />
          <el-table-column prop="depname" label="科室" />
          <el-table-column prop="title" label="医生" />
          <el-table-column prop="amount" label="服务费" />
          <el-table-column prop="patientName" label="就诊人" />
          <el-table-column prop="param.orderStatusString" label="订单状态" />
          <el-table-column prop="" label="操作">
            <template #default="{ row }">
              <el-button type="success" round @click="toDetail(row.id)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next , jumper, -> ,total,sizes"
          :total="total"
          v-model:current-page="page"
          v-model:page-size="limit"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="changeSize"
          @current-change="changeCurrent"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { reqGetUser } from "@/api/HospitalPage";
import { reqOrderState, reqUserOrderInfo } from "@/api/UserPage";
export default {
  name: "allOrder",
  data() {
    return {
      visitor: "",
      orderStatus: "",
      userInfo: [],
      allStatus: [],
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
    };
  },
  methods: {
    async getUser() {
      let result = await reqGetUser();
      if (result.code == 200) {
        this.userInfo = result.data;
      }
    },
    async getOrderState() {
      let result = await reqOrderState();
      this.allStatus = result.data;
    },
    async getUserOrderInfo() {
      let result = await reqUserOrderInfo(
        this.page,
        this.limit,
        this.visitor,
        this.orderStatus
      );
      if (result.code == 200) {
        this.tableData = result.data.records;
        this.total = result.data.total;
      }
    },
    changeSize() {
      this.page = 1;
      this.getUserOrderInfo();
    },
    changeCurrent() {
      this.getUserOrderInfo();
    },
    handlerOrderInfo() {
      this.getUserOrderInfo();
    },
    toDetail(id) {
      this.$router.push({ path: "/user/orderPage", query: { orderId: id } });
    },
  },
  mounted() {
    this.getUser();
    this.getOrderState();
    this.getUserOrderInfo();
  },
};
</script>

<style lang="scss" scoped>
.orders-box {
  .orders-card {
    .orders-main {
      .orders-table {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
